<template>
    <div :class="'swiper-container  inner-container '+type" >
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in List" :key="item.id">
                <div class="preview">
                    <img :src="imgUrl[item.name]" alt="">
                    <div class="info">
                        <div class="name">{{item.name}}</div>
                        <div class="type">类型：</div>
                        <div class="level">等级：{{item.level}}</div>
                    </div>
                </div>
                <div class="desc">
                    <h2>基础属性</h2>
                    <p class="white" v-for="signitem in sp(item.base_attribute)" :key="signitem">{{signitem}}</p>           
                    <h2 v-if="item.rl_attribute">熔炼效果</h2>
                    <p class="green" v-show="item.rl_attribute" v-for="signitem1 in sp(item.rl_attribute)" :key="signitem1">{{signitem1}}</p>
                    <h2 v-if="item.bs_attribute">宝石属性</h2>
                    <p class="blue" v-show="item.bs_attribute" v-for="(signitem2,index) in sp(item.bs_attribute)" :key="index">{{signitem2}}</p>
                    <h2>打造：{{item.dz_name}} 强化打造</h2>
                    <h2>耐久度：{{item.njd}}</h2>
                    <h2>评分：{{item.pf}}</h2>
                </div>                           
            </div>                      
        </div>
        <div class="swiper-pagination">
            <span>1</span>
            <span>3</span>
        </div>
    </div>          
</template>
<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import Pictures from "@/pages/common/Pictures";
export default {
    data(){
        return{
            imgUrl:Pictures.imgUrl
        }
    },
    props:{
        List:Array,
        type:String
    },
    computed:{
        sp(){
            return function(sign){
                return (sign+'').split(';');
                };
            },
    },
    mounted () {
        this.initSwiper();
    },
    methods:{
        initSwiper () {
         var swiper= new Swiper('.'+this.type, {
            observer:true,
            observeParents:true,
            pagination : '.swiper-pagination',
            paginationType : 'custom',
            paginationCustomRender: function (swiper, index, total) {
             return index + ' / ' + total;
            }
          });
           this.$emit("listenSwiper",swiper);
        }
      }
    
}
</script>
<style lang="scss" scoped>
.swiper-container{
                width: 100%;
                .swiper-wrapper{
                    width: 100%;   
                     .swiper-slide{
                        width: 100%;
                        .preview{
                            display: flex;
                            width: 100%;
                            height: rem(230);
                            padding:rem(40) rem(20);
                            img{
                                width: rem(170);
                                height: rem(170);
                                background-color: #fff;
                                border-radius: rem(15);
                            }
                            .info{
                                flex: 1;
                                margin-left: rem(30);
                                .name{
                                    margin-top: rem(-10);
                                    font-family: 微软雅黑;
                                    font-size: rem(45);                           
                                    color: #6ddcf6;
                                }
                                .type,
                                .level{
                                    color: #fcf31c;
                                    font-size: rem(40);
                                }
                            }
                        }
                        .desc{
                            width: 100%;
                            height: auto;
                            padding:rem(40) rem(30);
                            h2{
                                color: #fcf31c;
                                font-weight: 400;
                                font-size: rem(40);
                                margin-top: rem(-20);
                            }
                            p{
                                margin-left: rem(40);
                                font-size: rem(40);
                                margin-top: rem(-30);
                                
                            }
                            .white{
                                    color: #fff;
                                }
                                .green{
                                    color: #51e414;
                                }
                                .blue{
                                    color: #6ddcf6;
                                }
                        }

                    }
            
                }
            .swiper-pagination{
                width: auto;
                height: rem(60);
                line-height: rem(60);
                right: rem(30);
                bottom: auto;
                left: auto;
                top: rem(30);
                padding: 0 rem(30);
                color: #fff;
                background: rgba(0,0,0,.5);
                border-radius: rem(30);
                font-size: rem(35);
            }

        }

</style>